<template>
  <el-dialog
    width="800px"
    :visible="visible"
    :title="$t('ALARM_VOICE_CONFIGURATION')"
    class="alarmConfigVoice"
    @open="open"
    @close="close"
  >
    <div class="pb-20">
      <div class="flex align-center mb-10">
        <div class="w-80">
          <span>{{ $t('SYSTEM_POPOVER') }}</span>
        </div>
        <el-switch v-model="systemAlert" />
      </div>
      <!-- 系统弹窗 -->
      <div class="flex align-center">
        <div class="w-80 text-right">{{ $t('ALARM_PLAY_INFO_PLAY_LEVEL') }}：</div>
        <el-checkbox-group v-model="alarmAlert" class="flex justify-between">
          <el-checkbox
            v-for="item in dictList.ALARM_LEVEL"
            :key="item.value"
            :label="Number(item.value)"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="pb-20">
      <div class="flex align-center mb-10">
        <div class="w-80">
          <span class="mr-5">{{ $t('VOICE_BROADCASTING') }}</span>
          <el-popover
            width="200"
            trigger="hover"
            :content="$t('SPEECH_TIPS')"
          >
            <i slot="reference" class="iconfont icon-AFSwenhao" />
          </el-popover>
        </div>
        <el-switch v-model="speech" />
      </div>
      <div class="pb-20">
        <div class="flex align-center">
          <div class="w-80 text-right">{{ $t('PLAY_CONTENT') }}：</div>
          <!-- 告警内容 -->
          <el-checkbox-group v-model="playConfigList" class="flex justify-between">
            <el-checkbox
              v-for="item in dictList.ALARM_PLAY_INFO"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <!-- 语音播报 -->
      <div class="flex ">
        <div class="w-80 text-right">{{ $t('BROADCASTING_MODE') }}：</div>
        <div>
          <el-radio-group v-model="speechMode" class="pb-10">
            <el-radio label="CUSTOM">{{ $t('CUSTOM_BROADCAST') }}</el-radio>
            <el-radio label="LOOP">{{ $t('LOOP_PLAYBACK') }}</el-radio>
          </el-radio-group>
          <template v-if="speechMode === 'CUSTOM'">
            <div v-for="(item, index) in alarmConfigList" :key="index" class="mb-10">
              <span>{{ item.alarmLabel }}：</span>
              <el-radio-group v-model="item.speechType ">
                <el-radio label="DISABLE">{{ $t('PROHIBIT') }}</el-radio>
                <el-radio label="TIMES">{{ $t('PLAY_TIMES') }}</el-radio>
              </el-radio-group>
              <el-input-number
                v-model="item.number"
                style="width: 100px; margin: 0 5px 0 25px"
                size="mini"
                :min="1"
                :max="99"
                :precision="0"
                controls-position="right"
              />{{ $t('Times') }}
            </div>
          </template>
        </div>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CANCEL') }}</el-button>
      <el-button type="primary" @click="$debounce(save)">{{ $t('SAVE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import userInfoApi from '@/api/basebiz/UserInfoApi'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        playConfigList: [],
        alarmConfigList: [],
        alarmAlert: [],
        speech: false,
        systemAlert: false,
        speechMode: 'CUSTOM'
      }
    },
    computed: {
      ...mapGetters(['dictList', 'alarmConfigData', 'getUserId'])
    },
    methods: {
      open() {
        this.getAlarmNoticeConfig()
      },
      // 告警配置新增修改
      save() {
        const data = {
          userId: this.getUserId,
          data: JSON.stringify({
            playConfigList: this.playConfigList,
            alarmConfigList: this.alarmConfigList,
            alarmAlert: this.alarmAlert,
            speech: this.speech,
            systemAlert: this.systemAlert,
            speechMode: this.speechMode
          })
        }
        userInfoApi
          .addAlarmNotice(data)
          .then(res => {
            if (res) {
              this.close()
              this.$store.dispatch('getConfigData', true)
              this.$message.success(this.$t('EXECUTE_RESULT_SUCCESS'))
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 获取告警配置
      getAlarmNoticeConfig() {
        this.alarmConfigList = this.alarmConfigData.alarmConfigList
        this.playConfigList = this.alarmConfigData.playConfigList
        this.speech = this.alarmConfigData.speech
        this.systemAlert = this.alarmConfigData.systemAlert
        this.alarmAlert = this.alarmConfigData.alarmAlert || []
        this.speechMode = this.alarmConfigData.speechMode || 'CUSTOM'
      },
      close(load) {
        this.$emit('close', load)
      }
    }
  }
</script>

<style scoped>
.w-80 {
  width: 1rem;
  margin-top: -3px;
}
.row-padding {
  padding: 0 40px 0 80px;
}
</style>
